import React, { ReactNode } from 'react'
import styles from './HomePage.module.css'
import {
  Header,
  Footer,
  SideMenu,
  Swiper,
  ProductCollection,
  BusinessPartners,
} from '../../components'
import { Row, Col, Typography, Spin } from 'antd'
import { productList1, productList2, productList3 } from './mockups'
import sideImage from '../../asset/images/sider_2019_12-09.png'
import sideImage2 from '../../asset/images/sider_2019_02-04.png'
import sideImage3 from '../../asset/images/sider_2019_02-04-2.png'

import { withTranslation, WithTranslation } from 'react-i18next'

import axios from 'axios'
import { connect } from 'react-redux'
import { RootState } from '../../redux/store'
import {
  fetchRecommendProductStartActionCreator,
  fetchRecommendProductSuccessActionCreator,
  fetchRecommendProductFailActionCreator,
} from '../../redux/recommendProducts/recommendProductsActions'
import { giveMeDataActionCreator } from '../../redux/recommendProducts/recommendProductsActions'

import { MainLayout } from '../../layouts/mainLayout'

//定义接口，给HomePageComponent使用 泛型
// interface State {
//   productList: any[]
// }

const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList,
  }
}
const mapDispatchToProps = (dispatch: any) => {
  return {
    // fetchStart: () => {
    //   dispatch(fetchRecommendProductStartActionCreator())
    // },
    // fetchSuccess: (data: any) => {
    //   dispatch(fetchRecommendProductSuccessActionCreator(data))
    // },
    // fetchFail: (error: any) => {
    //   dispatch(fetchRecommendProductFailActionCreator(error))
    // },
    giveMeData: () => {
      dispatch(giveMeDataActionCreator())
    },
  }
}

type PropsType = WithTranslation &
  ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>
class HomePageComponent extends React.Component<PropsType> {
  //初始化数据
  // constructor(props: any) {
  //   super(props)
  //   this.state = {
  //     productList: [],
  //   }
  // }

  // async componentDidMount() {
  //   console.log('componentDidMount')

  //   this.props.fetchStart()
  //   try {
  //     const { data } = await axios.get(
  //       'https://mock.mengxuegu.com/mock/64fc8254e70b8004a69ea29a/https:/mock.TrvalData/api/productcellections'
  //     )
  //     //获得 请求的数据，调用方法，派遣数据
  //     this.props.fetchSuccess(data)
  //   } catch (error: any) {
  //     this.props.fetchFail(error.message)
  //   }
  // }
  componentDidMount() {
    this.props.giveMeData()
  }

  render() {
    const { t, productList, loading, error } = this.props
    const productListarry = productList.data
    console.log('productList', productList)

    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: 'auto',
            marginRight: 'auto',
            width: '100%',
          }}
        />
      )
    }
    if (error) {
      return <div>网站出错：{error}</div>
    }

    return (
      <>
        <MainLayout>
          {/* 页面内容content */}
          <div className={styles['page-content']}>
            <Row style={{ marginTop: 25 }}>
              <Col span={6}>
                <div>
                  <SideMenu></SideMenu>
                </div>
              </Col>
              <Col span={18}>
                <div>
                  <Swiper />
                </div>
              </Col>
            </Row>
          </div>

          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                {t('home_page.hot_recommended') as ReactNode}
              </Typography.Title>
            }
            sideImage={sideImage}
            products={
              productListarry[0]
                ? productListarry[0].touristRoutes
                : productList1
            }
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="danger">
                {t('home_page.new_arrival') as ReactNode}
              </Typography.Title>
            }
            sideImage={sideImage2}
            products={
              productListarry[1]
                ? productListarry[1].touristRoutes
                : productList2
            }
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="success">
                {t('home_page.domestic_travel') as ReactNode}
              </Typography.Title>
            }
            sideImage={sideImage3}
            products={
              productListarry[2]
                ? productListarry[2].touristRoutes
                : productList3
            }
          />

          <BusinessPartners></BusinessPartners>
        </MainLayout>
      </>
    )
  }
}

export const HomePage = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomePageComponent))
